<template>
  <div class="login">
    <div class="icon">
      <img src="@/assets/login_bg.png" style="width:100%;height:100%;" alt="">
      <div class="xs_title">
        <p>老师您好,</p>
        <p>请登录!</p>
      </div>
    </div>
    <div class="filed">
      <!-- 手机号码 -->
      <zf-input
        type="tel"
        ref="listen"
        maxlength="11"
        :defaultVal="mobile"
        errMsg="手机号码格式错误"
        placeholder="请输入手机号码"
        @change="listenMobile"
      ></zf-input>
      <!-- 密码 -->
      <zf-input
        type="code"
        required
        :sendSuc.sync="identify"
        @changcode:status="changeStatus"
        maxlength="6"
        @sendc="sendCode"
        placeholder="请输入验证码"
        errMsg="请输入正确的验证码"
        @change="listenCode"
      ></zf-input>
      <div :class="disabled ? 'submit mainBgBtnColor' : 'disableSubmit disBgBtnColor'" @click="submit">登录</div>
    </div>
  </div>
</template>

<script>
import Input from '@/components/Input'
import { Toast } from 'vant'
export default {
  name: 'login',
  components: {
    zfInput: Input
  },
  data () {
    return {
      openId: null,
      mobile: '',
      identify: false,
      mobileSuccess: false, // 手机号码是否校验成功
      code: null,
      codeSuccess: false,
    }
  },
  computed: {
    disabled() {
      return this.mobileSuccess && this.codeSuccess ? true : false
    }
  },
  created() {
    this.openId = localStorage.getItem('px_user_openid')
  },
  methods: {
    sendCode() {
      if (!this.mobile.length) {
        this.$toast('请输入手机号码')
        return
      }
      if (!this.mobileSuccess) return
      this.$http.sendCode({mobile: this.mobile, openId: this.openId, type: 'teacher'}).then(res => {
        console.log(res)
        if (res.data.code === 200) {
          this.identify = true
          Toast(err.data.message)
        }
      }).catch(err => {
        this.$toast(err.data.message)
      })
    },
    // 重新发送
    changeStatus(e) {
      this.identify = e.value
    },
    // 验证码
    listenCode(e) {
      this.code = e.value
      this.codeSuccess = e.isSuccess
    },
    // 手机号码
    listenMobile(e) {
      this.mobile = e.value
      this.mobileSuccess = e.isSuccess
    },
    submit () {
      if (!this.disabled) return
      this.$http.wxLogin({mobile: this.mobile, code: this.code, openId: this.openId, type: 'teacher'}).then(res => {
        if (res.data.code === 200) {
          if (res.data.result.token) window.localStorage.setItem('px_token', res.data.result.token)
          if (res.data.result.openId) window.localStorage.setItem('px_user_openid', res.data.result.openId)
          this.$router.push({name: 'teacherMine'})
        }
      }).catch(err => {
        this.$toast(err.data.message)
        console.log(err, '111111', this.$route.params)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .login {
    color: #333;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    .icon {
      width: 100%;
      height: 200px;
      position: relative;
      .xs_title {
        position: absolute;
        left: 16px;
        bottom: 16px;
        color: #2C2B2D;
        font-size: 26px;
        font-weight: 600;
        text-align: left;
      }
    }
    .title {
      margin-top: 13px;
      margin-bottom: 23px;
      color: #999;
    }
    .filed {
      flex: 1;
      position: relative;
      width: 100%;
      height: 200px;
      padding: 0px 20px 0px;
      box-sizing: border-box;
      .telErr {
        margin-top: 5px;
        text-align: left;
        font-size: 12px;
        color:#DC143C;
      }
      .show_pwd {
        width: 20px;
        height: 16px;
        padding-right: 10px;
      }
      .submit {
        width: 100%;
        height: 44px;
        margin-top:40px;
        font-size: 16px;
        color: #fff;
        text-align: center;
        line-height: 44px;
      }
      .disableSubmit {
        width: 100%;
        height: 44px;
        margin-top: 40px;
        font-size: 16px;
        color: #fff;
        text-align: center;
        line-height: 44px;
      }
      
    }
  }
</style>
<style lang="scss">
  .login {
    .van-cell {
      padding-left: 0px;
    }
  }
</style>
